<template>
  <div>
    <el-drawer
      title="app授权"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="20"
      type="primary"
    >
      <div class="inners" v-loading="loading">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox class="listChick" v-for="item in cities" :label="item" :key="item">{{item}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="btn">
        <el-button type="primary" size="mini" @click="saveFun()">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { appMenuAll, appMenuAllById, authorityMenuSave } from "@/api/Tmanager";
export default {
  data() {
    return {
      popup: {
        open: "flex:100;transition:0.2s;overflow:hidden", //右侧组件展开时的样子
        close: "width:0px;transition:0.2s;overflow:hidden" //右侧组件关闭时的样子
      },
      //加载
      loading: true,
      //list信息
      row: {},
      //抽屉
      drawer: false,
      direction: "rtl",
      //主要数据
      mainData: [],
      //多选
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
    };
  },
  methods: {
    //打开抽屉
    open(row) {
      //获取数据
      let token = this.$store.state.user.token;
      let groupId = row.id;
      this.row = row;
      this.checkedCities = [];
      this.mainData = [];
      //获取选项
      appMenuAll(token).then((Response) => {
        this.mainData = Response;
        this.cities = [];
        this.mainData.forEach((val) => {
          this.cities.push(val.title);
        });
        console.log(this.mainData);

        //获取已选权限
        appMenuAllById(token, groupId).then((Response2) => {
          this.checkedCities = [];
          Response2.forEach((element) => {
            this.checkedCities.push(element.title);
          });
          this.loading = false;
          console.log(this.checkedCities);
        });
      });
      this.drawer = true;
    },
    //多选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //点击保存按钮
    saveFun() {
      console.log("保存按钮！！");
      let menuTrees = [];
      let id = this.row.id;
      for (let i = 0; i < this.mainData.length; i++) {
        for (let j = 0; j < this.checkedCities.length; j++) {
          if (this.checkedCities[j] == this.mainData[i].title) {
            menuTrees.push(this.mainData[i].id);
          }
        }
      }
      console.log(menuTrees);
      authorityMenuSave(id, menuTrees).then((Response) => {
        console.log(Response);
        this.$message({
          message: Response.message,
          type: Response.flag ? "success" : "warning",
        });
      });
    },
    //提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.inners {
  padding: 20px;
}
.listChick {
  display: block;
}
.el-dialog__close::before {
  color: #000 !important;
  margin: 0 auto !important;
  position: absolute !important;
  top: 26px !important;
  right: 28px !important;
}
.btn {
  padding: 0px 40px;
}
</style>